﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/zhumeng.css"/>
</head>














<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	
	//--------------------------------------------------------------------搜索框
	            var ssk = $('#myinput'); //获取到文本域对象  
                ssk.css("color","#969696"); //设置文本域的样式  
                ssk.val("请输入内容"); //设置默认显示文字  
                var default_value = ssk.val(); //把默认显示的文字赋给一个变量  
                  
                ssk.focus(function() {  //当鼠标点击文本域时修改文本域的样式，判断文本域内的文字是否等于默认值，如果等于就把文本域内设空  
                    ssk.css("color","black");  
                    if (ssk.val() == default_value) {  
                        ssk.val('');  
                    }  
                });  
  
                ssk.blur(function() { //当文本域失去鼠标焦点时判断文本域中的值是否为空，如果为空就把文本域的值设置为默认显示的文字并修改样式  
                    ssk.css("color","black");  
                    if (ssk.val() == '') {  
                        ssk.val(default_value);  
                        ssk.css("color","#969696");  
                    }  
                }); 
	
	
	//--------------------------------------------------------------------
	
	
	
	
	
	
	//--------------------------------------------------------------------鼠标跟随下标
	
	$(".nav ul li").mouseover(function(){
		
		var a=$(this).position().left
		var b=$(this).width()
		$(".line").stop().animate({width:b,left:a})
		//跟随鼠标宽度
		//跟随鼠标移动
	})
	
	//--------------------------------------------------------------------
	
	
	
	
	//--------------------------------------------------------------------点击导航栏延伸
	$(".nav li").mouseover(function(){
	     $(this).find(".down").stop().slideDown(300)
    }).mouseout(function(){
		 $(this).find(".down").stop().slideUp(300)	
	})
	
	
	
	//--------------------------------------------------------------------
	
	
	
	
	
	
	
	
	
	//-----------------------------------------------------------------游戏展示跳跃
	var wWin = $(window).height()*0.8;
	var abtTop=$(".about").offset().top;
	$(window).scroll(function(){
		document.title=sTop;
		var sTop=$(this).scrollTop();
		 if(sTop >=abtTop-wWin){
		       $(".about").addClass("on");
		    }
		
	})
	
	
	
	
	

	
	
	//----------------------------------------------------------------------------
	
	
	//----------------------------------------------------------------放大镜代码

	
	
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function(e){
			
		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
			
		$("#tooltip").remove();	 //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
	
	
	
	
	
	
	
	//----------------------------------------------------------------------------
	
	
	
	
	
	
	
	//--------------------------------------------------------------------中心轮播
	
	
	
//初始化设置
	var i=0;
	var len=$(".banner .pic li").length;	
	$(".banner .pic li").first().show();
	$(".banner .num li").first().addClass("on");
	
	//手动选型卡轮播	
	$(".banner .num li").mouseover(function(){
		var idx=$(this).index();
		$(this).addClass("on").siblings().removeClass("on")
		$(".banner .pic li").eq(idx).fadeIn().siblings().fadeOut();
	})	
	
	
	//自动轮播器
	var t=setInterval(rightRun,2000)
	
	
	
	//鼠标划入海报，将动画停止，移开继续运行动画
	$(".banner").hover(function(){
		clearInterval(t)
	},function(){
		t=setInterval(rightRun,2000)
	})
	
	
	
	
	//点击向左的箭头
	$(".banner .btnL").click(function(){
		leftRun()
	})
	
	
	//点击向右的箭头
	$(".banner .btnR").click(function(){
		rightRun()
	})
	
	
	
	
	
	//向左运动的函数
	function leftRun(){
		i--;
		if(i<=-1){
			i=len-1;	
		}
		$(".banner .pic li").eq(i).fadeIn().siblings().fadeOut();
		$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on")
	}
	
	
	
	
	//向右运动的函数
	function rightRun(){
		i++;
		if(i>=len){
			i=0;	
		}
		$(".banner .pic li").eq(i).fadeIn().siblings().fadeOut();
		$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on")
	}
	
	
	
	
	
	
	
	//----------------------------------------------------------------------------
	
	
	//----------------------------------------------------------------------------//点击回到顶部
		$(window).scroll(function(){
		var sTop=$(window).scrollTop()
		
		
				if(sTop>=800){
					 $(".nav").css({position:"fixed",top:0})
					 $(".shoushuo").css({position:"fixed",top:0})
				     $(".return").css("display","table")
			    }else if(sTop<800){
					$(".nav").css({position:"relative",top:0})
					$(".shoushuo").css({position:"relative",top:0})
				     $(".return").css("display","none")
			    }
		

	})
	
	
	
	
	$(".return").click(function(){
		var sTop=$(window).scrollTop()
		$("html,body").animate({scrollTop:0})
		
	})
	
	
	
	
	

	
	//----------------------------------------------------------------------------手风琴
	
			$('#wrap li').mouseover(function(){
			if(!$(this).hasClass('curr')){
				$('#wrap li').removeClass('curr');
				$(this).addClass('curr');

				// 切换背景
//				$('#wrap li').each(function(index){
//					if($(this).hasClass('curr')){
//						$('.bg').fadeOut(300);
//						$('.bg:eq(' + index + ')').fadeIn(500);
//					}
//				});

				$('.curr').stop().animate({
					width: 700
				}, 500, 'linear');
				$('#wrap li').not('.curr').stop().animate({
					width: 100
				}, 500, 'linear');
			}
		});
	})()
	
	
	
	
	
	
	


</script>

<body>

<!--头部区域-->

<div class="header">
	<div class="top">
    
    	<div class="con">
        	<div class="text">欢迎来到Rhine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  当前时间：<p style=" display:inline-block;" id="time">
                        </p></div>
            <div class="link">
            	<a href="#">官方微信</a>|
                <a href="#">收藏Rhine</a>|
                <a href="#">English</a>
            </div>
        </div>  
    </div>     
    <div class="btm">
    <div class="btm_con">
        
        	<div class="logo">
            	<img src="images/logo_s.jpg" alt="" width="900" height="135.5"/>
        </div>
<div class="tel">
               <p><span>Rhine服务热线：0566-5060-500</span></p>
               <p><span> Rhine平台是发明者AlexZhao开发设计的游戏平台。</span></p>

      </div>
        
      </div>
    </div>
    <div class="nav" >
    	<ul>
        	<li><a href="#">首页</a>
            </li>
            <li><a href="#">游戏商城</a>
                <div class="down">
            	<a href="#">休闲</a>
                <a href="#">体育</a>
                <a href="#">冒险</a>
                <a href="#">独立</a>
                <a href="#">策略</a>
                <a href="#">角色扮演</a>
                <a href="#">大型网络RPG</a>
                </div>
            </li>
            <li><a href="#">硬件购买</a>
                 <div class="down">
            	<a href="#">Rhine_VR</a>
                <a href="#">Rhine_鼠标</a>
                <a href="#">Rhine_键盘</a>
                <a href="#">Rhine_音响</a>
                <a href="#">Rhine_控制器</a>
                </div>
            </li>
            <li><a href="#">新闻动态</a>
                <div class="down">
            	<a href="#">最新消息</a>
                <a href="#">我的收藏</a>
                <a href="#">历史记录</a>
                <a href="#">观看最多</a>
                </div>
            </li>
            <li><a href="#">视频中心</a>
                <div class="down">
                <a href="#">电影</a>
                <a href="#">游戏CG</a>
                <a href="#">游戏攻略</a>
            	<a href="#">我的收藏</a>
                <a href="#">历史记录</a>
                <a href="#">热点查询</a>
                <a href="#"></a>
                </div>
            </li>
            <li><a href="#">关于我们</a>
                <div class="down">
                <a href="#">Rhine</a>
                <a href="#">Rhine历史</a>
                <a href="#">Rhine地址</a>
            	<a href="#">Rhine工作人员</a>
                <a href="#">Rhine适用平台</a>
                </div>
            </li>
            <li><a href="#">登陆</a></li>
            <li><a href="#">注册</a></li>
 
 
            <li>
                <form class="shoushuo">
                <input id="myinput" value="请输入" class="so" type="text" />
                <input value="" class="btn" type="submit"/>
                </form>
             </li>
            
        </ul>

            <div style="clear:both"></div>
            <div class="line"></div>
    </div>
</div>

<!--banner区域-->



<div class="banner">

	<ul class="pic">
    	<li><a href="#"><img src="images/巫师海报1.jpg"/></a></li>
        <li><a href="#"><img src="images/巫师海报2.jpg"/></a></li>
        <li><a href="#"><img src="images/巫师海报3.jpg"/></a></li>
        <li><a href="#"><img src="images/巫师海报4.jpg"/></a></li>
        <li><a href="#"><img src="images/巫师海报5.jpg"/></a></li>
    </ul>
       
   <ul class="num">
    	<li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
    </ul>
    
<div class="btn btnL">&lt;</div>
    <div class="btn btnR">&gt;</div>

   </div>







<!--产品区域-->

<div class="pro">
	<div class="pro_title">
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p> 
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>


        
</div>
    <img class="fenlei" src="images/fenlei.jpg" alt=""/> 

    <div class="about">

        <div class="box box1">
            <a href="images/x_1.jpg" class="tooltip">
            	<img  src="images/z_1.jpg" alt="Picture 1"/>
            </a>
        </div>

        <div class="box box2">
            <a href="images/x_2.jpg" class="tooltip" title="Picture 2">
            	<img src="images/z_2.jpg" alt="Picture 2"/>
            </a>
        </div>

        <div class="box box3">
            <a href="images/x_3.jpg" class="tooltip" title="Picture 3">
            	<img src="images/z_3.jpg" alt="Picture 3"/>
            </a>
        </div>

        <div class="box box4">
            <a href="images/x_4.jpg" class="tooltip" title="Picture 4">
            	<img src="images/z_4.jpg" alt="Picture 4"/>
            </a>
         </div>
         
         <div class="box box5">
            <a href="images/x_5.jpg" class="tooltip" title="Picture 5">
            	<img src="images/z_5.jpg" alt="Picture 5"/>
            </a>
         </div>
         
         
         <div class="box box6">
            <a href="images/x_6.jpg" class="tooltip" title="Picture 6">
            	<img src="images/z_6.jpg" alt="Picture 6"/>
            </a>
         </div>
         
         
         
     </div>

	<a class="more" href="https://store.steampowered.com/">转到 steam 我们的合作伙伴</a>    
    
</div>


<!--返回顶层图标-->

<div class="return">↑</div>


<!--游戏手风琴-->

	<div class="bg bg-box-1"></div>
	<div class="bg bg-box-2"></div>
	<div class="bg bg-box-3"></div>
    <div class="bg bg-box-4"></div>
	<div id="wrap">
		<ul>
			<li>
				<div class="text">
					<p>尼尔机械纪元</p>
				</div>
			</li>
			<li>
				<div class="text">
					<p>黎明杀机</p>
				</div>
			</li>
			<li>
				<div class="text">
					<p>彩虹六号</p>
				</div>
			</li>
			<li class="curr">
				<div class="text">
					<p>塞尔达荒野之息</p>
				</div>
			</li>
		</ul>
	</div>





<!--产品优势区域-->






<div class="advantage">
	<div class="ad_title">
    	<img src="images/z_youshi.png"/>
        <h3>---Rhine平台---</h3>
        <span>专业于体验-----服务于玩家</span>   
    </div>

	<div class="ad_con">
    	<dl>
        	<dt>
            	<img src="images/z_ysbiao1.png"/>
            </dt>
            <dd>
            	<h4>白手处理系统</h4>
                <p>采用AED6.5最新技术 融合Windows10、WER5.2等处理系统 是国内唯一一个占据全球系统区之一的处理系统.</p>
            </dd>
        </dl>
        <dl style="margin-right:0;">
        	<dt>
            	<img src="images/z_ysbiao2.png"/>
            </dt>
            <dd>
            	<h4>Rhine的丰富的自定义化</h4>
                <p>丰富的自定义化是Rhine存在的关键之一 以前是 现在也是 你可以完全自定义自己的Rhien.</p>
            </dd>
        </dl>
        
    
    </div>

</div>

<!--关于我们区域-->

<div class="about">
	<div class="ab_title">
  <h2>关于我们</h2>
        <span>Rhine平台是发明者AlexZhao开发设计的游戏平台。</span>  
    </div>
    <h2>欢迎Rhine官网</h2>
    <p>Rhine创建于1998年。Rhine平台是目前全球最大的综合性数字发行平台之一。玩家可以在该平台购买、下载、讨论、上传和分享游戏和软件。
  <p>地址:银河系f.26星系-太阳系-地球-亚洲-中国-山东-济南-济南职业学院-2号宿舍楼-315宿舍
邮箱：270065495@qq.com 服务热线 : 0572-5060188</p>
</p>
    
</div>
<div>
<img src="images/logo_d.jpg" width="235" height="89" />
<img class="d_tp2" src="images/logo_d2.jpg" width="235" height="89" />
</div>
 <span class="ft_center"></span><!--底部区域-->
<div class="footer">
	<div class="ft_center">
	  <p>Copyright © 2014 Rhine All Rights Reserved . 技术支持：RhineCA</p>
  </div>
</div>


<div id="lanren">
	<div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
	<audio loop="" src="images/Spikeroog.mp3" id="media" preload="preload"></audio>
	</div>
</div>
<script>
	//--------------------------------------------------------------------音乐
var lanren = {
	changeClass: function (target,id) {
       	var className = $(target).attr('class');
       	var ids = document.getElementById(id);
       	(className == 'on')
           	? $(target).removeClass('on').addClass('off')
           	: $(target).removeClass('off').addClass('on');
       	(className == 'on')
           	? ids.pause()
           	: ids.play();
   	},
	play:function(){
		document.getElementById('media').play();
	}
}
lanren.play();
//--------------------------------------------------------------------音乐
</script>

<script>

    //--------------------------------------------------------------------当前时间
    window.onload = function () {

        //定时器每秒调用一次fnDate()
        setInterval(function () {
            fnDate();
        }, 1000);
    }

    //js 获取当前时间
    function fnDate() {
        var oDiv = document.getElementById("time");
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        var time = year + "-" + fnW((month + 1)) + "-" + fnW(data) + " " + fnW(hours) + ":" + fnW(minute) + ":" + fnW(second);
        oDiv.innerHTML = time;
    }
    //补位 当某个字段不是两位数时补0
    function fnW(str) {
        var num;
        str > 10 ? num = str : num = "0" + str;
        return num;
    }


    //--------------------------------------------------------------------当前时间
    </script>
</body>
</html>
